<template>
  <el-dialog title="预览附件" :visible.sync="filePop" width="1300px" append-to-body @close="close">
    <div class="scroll_lst"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <vue-office-docx :src="docx"  :key="fileKey"  @rendered="renderedHandler" @error="errorHandler" v-if="docx"/>
      <vue-office-pdf :src="pdf"  :key="fileKey" @rendered="renderedHandler" @error="errorHandler" v-else-if="pdf"/>
      <div  v-else-if="imgSrc">
        <img :src="imgSrc" alt=""  style="display: block;max-width: 100%;">
      </div>
      <div v-else="other">
         <el-link type="primary" @click="download">{{form.name}}</el-link>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button  @click="filePop=false">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import VueOfficeDocx from '@vue-office/docx'
  import VueOfficePdf from '@vue-office/pdf'
  import '@vue-office/docx/lib/index.css'
  export default {
     components: {
            VueOfficeDocx,
            VueOfficePdf
        },
    name: 'AddKnowledgeBase',
    data() {
      return {
        fileKey:0,
        docx:'',
        pdf:'',
        imgSrc:'',
        other:"",
        loading:false,
        filePop: false, // 控制弹窗显示隐藏，可根据父组件传值调整
        http: 'http://gf55b3f8.natappfree.cc/upload/',
        file: '',
        form:''
      }
    },
    methods: {
      download() {
        window.open(other)
      },
      convertToLowercase(str) {
        return str.toUpperCase().toLowerCase();
      },
      renderedHandler() {
           this.loading=false
      },
      errorHandler() {
          this.loading=false
            this.$message.error('渲染失败,请稍后再试！');
      },
      open(obj) {
        this.filePop = true
        this.fileKey+=1
        this.clear()
        let row=JSON.parse(JSON.stringify(obj))
        this.loading=true
        this.form=row
        // let fileFormat=this.convertToLowercase(row.file_path.split('.')[1])
        let fileFormat=this.convertToLowercase(row.filename.split('.')[1])
        if(fileFormat=='docx'){
          this.docx=this.$baseUrl+'/upload/' + row.filename
        }else if(fileFormat=='pdf'){
           this.pdf=this.$baseUrl+'/upload/' + row.filename
        }
        else if(fileFormat=='jpg' || fileFormat=='png' || fileFormat=='jpep'){
           this.imgSrc=this.$baseUrl+'/upload/' + row.filename
        }else{
            this.other=this.$baseUrl+'/upload/' + row.filename
        }
        if(this.imgSrc || this.other ){
          this.loading=false
        }
      },
      clear(){
        this.docx=''
        this.pdf=''
        this.imgSrc=''
        this.other=''
      },
      close() {
        this.form.name = ''
        this.filePop = false;
      },
      handleConfirm() {
        // 若提交成功后关闭弹窗，可根据实际交互调整
        this.filePop = false;
      }
    }
  }
</script>

<style scoped>
  .dialog-footer {
    text-align: right;
  }
.scroll_lst{
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 #f5f5f5;
  height: 550px;
  overflow-y: scroll;
}
.scroll_lst::-webkit-scrollbar {
  width: 6px;
}
.scroll_lst::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}
.scroll_lst::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}
</style>
